<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar left-icon="left" left-text="返回" title="修改个人资料"
		 height="100rpx" :border="false" @clickLeft="back" />
		 <view class="info">
			 <!-- 第一行 -->
		 	<view class="info_box">
				<view class="info_prc">
					<uni-icons custom-prefix="iconfont" type="icon-touxiang" color="#1f8fff" size="35rpx"></uni-icons>
				</view>
		 		<view class="info_zi">
		 			头像
		 		</view>
				<view class="info_tou">
					<uni-icons custom-prefix="iconfont" type="icon-nantouxiang-"  size="80rpx"></uni-icons>
				</view>
				<uni-icons type="right" class="icon"></uni-icons>
		 	</view>
			<!-- 第二行 -->
			<view class="info_box">
				<view class="info_prc">
						<uni-icons custom-prefix="iconfont" type="icon-nicheng" color="#1f8fff" size="35rpx"></uni-icons>
					</view>
					<view class="info_zi">
						昵称
					</view>
					<view class="info_ga">
						嘎哥
					</view>
					<uni-icons type="right" class="icon"></uni-icons>
				</view>
				<!-- 第三行 -->
			<view class="info_box">
				<view class="info_prc">
						<uni-icons custom-prefix="iconfont" type="icon-gender" color="#1f8fff" size="35rpx"></uni-icons>
					</view>
					<view class="info_zi">
						性别
					</view>
					<view class="info_ga">
						保密
					</view>
					<uni-icons type="right" class="icon"></uni-icons>
				</view>
				<!-- 第四行 -->
			<view class="info_box">
				<view class="info_prc">
						<uni-icons custom-prefix="iconfont" type="icon-shouji" color="#1f8fff" size="35rpx"></uni-icons>
					</view>
					<view class="info_zi">
						手机
					</view>
					<view class="info_ga">
						13522566761
					</view>
					<uni-icons type="right" class="icon"></uni-icons>
				</view>
		 </view>
		 
		 <!-- 按钮 -->
		 <view class="btn" @click="back" >
		 	<text class="btn_wen">保存</text>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="less">
	.info{
		height: 430rpx;
		background-color: aqua;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.info_box{
			width: 100%;
			height:106rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #f0f0f0;
			position: relative;
			.info_prc{
				margin-top: 33rpx;
				margin-left: 27rpx;
			}
			.info_zi{
				font-size: 29rpx;
				position: absolute;
				top: 37rpx;
				left:84rpx;
				color: #666666;
			}
			.info_tou{
				position: absolute;
				top: 8rpx;
				right:83rpx;
			}
			.icon{
				position: absolute;
				top: 39rpx;
				right:45rpx;
			}
			.info_ga{
				position: absolute;
				top: 39rpx;
				right:83rpx;
				color: #666666;
				font-size: 29rpx;
			}
		}
	}
	.btn{
			height:77rpx;
			background-color: #1f8fff;
			border-radius:65rpx ;
			margin-left: 99rpx;
			margin-right: 140rpx;
			margin-top: 94rpx;
			text-align: center;
			.btn_wen{
				line-height: 77rpx;
				color: #fff;
			}
		}
</style>
